import { Form, Button, DatePicker, Select, Input } from 'antd'
import 'moment/locale/zh-cn'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { useEffect, useState } from 'react';
import { values } from 'mobx';



export default function SearchForm(props: any) {
    const [form] = Form.useForm();
    // 传递的props
    const { searchList, buttonList, children } = props

    // 点击筛选
    const onQuery = (values: any) => {
        props.onQuery(values)
    };
    // 重置
    const onReset = () => {
        props.onReset()
        form.resetFields();  //重置
    };

    //导入
    const importData = () => {
        props.onImport()
    }

    // 导出
    const exportData = () => {
        props.onExport()
    }

    // 搜索输入框
    const getInput = (item: any) => {
        if (item.type === 'input') {
            return (
                <Input maxLength={item.maxLength} style={{ width: '200px' }} placeholder={'请填写' + item.label} />
            )
        } else if (item.type === 'select') {
            return (
                <Select
                    placeholder={'请选择' + item.label}
                    defaultValue={item.defaultValue}
                    style={{ width: 200, marginRight: '20px' }}
                    options={item.options}
                >
                </Select>
            )
        } else if (item.type === 'dataPicker') {
            {/* 传入locale属性 控制中文显示*/ }
            return (
                <DatePicker locale={locale} style={{ width: '200px' }} ></DatePicker>
            )
        }
    }

    return (
        <div>
            <Form
                layout='inline'
                form={form}
                onFinish={onQuery}>
                {

                    searchList.map((item: any) => (
                        <Form.Item
                            label={item.label}
                            name={item.name}
                            style={{ height: '50px', marginRight: '20px' }}
                        >
                            {getInput(item)}
                        </Form.Item>
                    ))
                }
                <Form.Item>
                    {
                        buttonList.query && <Button type="primary" htmlType="submit" style={{ marginLeft: 20 }}>
                            查询
                        </Button>
                    }
                    {
                        buttonList.reset && <Button htmlType="button" onClick={onReset} style={{ marginLeft: 20 }}>
                            重置
                        </Button>
                    }
                    {
                        buttonList.import && <Button htmlType="button" onClick={importData} style={{ marginLeft: 20 }}>
                            导入
                        </Button>
                    },
                    {
                        buttonList.export && <Button htmlType="button" onClick={exportData} style={{ marginLeft: 20 }}>
                            导出
                        </Button>
                    }
                    {children}
                </Form.Item>
            </Form>
        </div >
    )
}
